<template>
    <div class="app-container">
        <div class="container">
            <div class="main page page-list">
                <div class="head-container">
                    <el-card shadow="never">
                        <div class="search-bar pd">
                            <el-form :inline="true" :model="searchModel" size="mini" class="demo-form-inline">
                                <el-form-item label="备注">
                                    <el-input v-model="searchModel.note" placeholder="备注" />
                                </el-form-item>

                                <el-form-item class="operations">
                                    <el-button v-permission="['ADMIN', 'common-sys-config::save']" type="success" @click="addConfig">新增</el-button>
                                    <el-button type="primary" @click="search">查询</el-button>
                                    <el-button type="default" @click="reset">重置</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-card>
                </div>

                <div class="data-list-wrap">
                    <el-card shadow="never">
                        <el-table v-loading="loading" :data="list" size="mini" style="width: 100%">
                            <el-table-column prop="id" label="编号" />
                            <el-table-column prop="key" label="key" />
                            <el-table-column prop="value" label="值" />
                            <el-table-column label="类型">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.valueType == 'number'">数字</span>
                                    <span v-if="scope.row.valueType == 'string'">字符串</span>
                                    <span v-if="scope.row.valueType == 'object'">对象</span>
                                    <span v-if="scope.row.valueType == 'number_arr'">数字数组</span>
                                    <span v-if="scope.row.valueType == 'string_arr'">字符串数组</span>
                                    <span v-if="scope.row.valueType == 'object_arr'">对象数组</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="note" label="备注" />
                            <el-table-column fixed="right" label="操作" width="150">
                                <template slot-scope="scope">
                                    <div>
                                        <el-button v-permission="['ADMIN','common-sys-config::update']" size="mini" type="text"
                                            @click="updateConfig(scope.row)">
                                            修改配置
                                        </el-button>
                                    </div>
                                </template>
                            </el-table-column>

                        </el-table>
                        <div class="paging-wrap">
                            <el-pagination :current-page="searchModel.pageNo" :page-sizes="[10, 20, 50, 100]"
                                :page-size="searchModel.pagesize" :total="searchModel.count"
                                layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                                @current-change="handleCurrentChange" />
                        </div>
                    </el-card>
                </div>

            </div>
        </div>
        <!-- 新增配置 -->
        <el-dialog :close-on-click-modal="false" :modal-append-to-body="false" :title="新增配置" class="dialog-action"
            width="50%" :visible.sync="addConfigDialog">
            <el-form label-width="100px" :model="addForm" size="mini" :rules="rules" ref="addForm">
                <el-form-item label="key" prop="key">
                    <el-input v-model="addForm.key" placeholder="请输入key"></el-input>

                </el-form-item>

                <el-form-item label="值" prop="value">
                    <el-input v-model="addForm.value" placeholder="请输入值"></el-input>

                </el-form-item>



                <el-form-item label="类型" prop="valueType">
                    <el-radio-group v-model="addForm.valueType">
                        <el-radio-button label="number">数字</el-radio-button>
                        <el-radio-button label="string">字符串</el-radio-button>
                    </el-radio-group>

                </el-form-item>

                <el-form-item label="备注" prop="note">
                    <el-input v-model="addForm.note" placeholder="请输入备注"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addConfigDialog = false">取 消</el-button>
                <el-button type="primary" @click="doAddConfig" :loading="opLoading">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 修改配置 -->
        <el-dialog :close-on-click-modal="false" :modal-append-to-body="false" title="修改配置" class="dialog-action"
            width="50%" :visible.sync="updateConfigDialog">
            <el-form label-width="100px" :model="updateForm" size="mini" :rules="updateRules" ref="updateForm">
                <el-form-item label="key" prop="key">
                    <el-input v-model="updateForm.key" placeholder="请输入key"></el-input>

                </el-form-item>

                <el-form-item label="值" prop="value">
                    <el-input v-model="updateForm.value" placeholder="请输入值"></el-input>

                </el-form-item>



                <el-form-item label="类型" prop="valueType">
                    <el-radio-group v-model="updateForm.valueType">
                        <el-radio-button label="number">数字</el-radio-button>
                        <el-radio-button label="string">字符串</el-radio-button>
                    </el-radio-group>

                </el-form-item>

                <el-form-item label="备注" prop="note">
                    <el-input v-model="updateForm.note" placeholder="请输入备注"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updateConfigDialog = false">取 消</el-button>
                <el-button type="primary" @click="doUpdateConfig" :loading="opLoading">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>
  
<script>
import { searchCommonSysConfig, updateCommonSysConfig, saveCommonSysConfig } from '@/api/business'
const defaultModel = {
    pageNo: 1,
    count: 0,
    pageSize: 10,
    note: '',
}
export default {
    components: {},
    data() {
        return {
            searchModel: _.cloneDeep(defaultModel),
            list: [],
            loading: false,
            opLoading: false,
            addConfigDialog: false,
            addForm: {
                valueType: "number"
            },
            updateForm: {},
            updateConfigDialog: false,
            rules: {
                key: [{ required: true, message: "请输入key", trigger: "blur" }],
                value: [
                    { required: true, message: "请输入值", trigger: "blur" },
                ],
                valueType: [
                    { required: true, message: "请选择类型", trigger: "blur" },
                ],
                note: [
                    { required: true, message: "请输入备注", trigger: "blur" },
                ],
            },

            updateRules: {
                key: [{ required: true, message: "请输入key", trigger: "blur" }],
                value: [
                    { required: true, message: "请输入值", trigger: "blur" },
                ],
                valueType: [
                    { required: true, message: "请选择类型", trigger: "blur" },
                ],
                note: [
                    { required: true, message: "请输入备注", trigger: "blur" },
                ],
            },
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        //新增配置
        addConfig() {
            this.addConfigDialog = true
            this.addForm = {
                valueType: "number"
            }
        },
        //确认新增
        doAddConfig() {
            this.opLoading = true
            let form = {
                key: this.addForm.key,
                value: this.addForm.value,
                valueType: this.addForm.valueType,
                note: this.addForm.note,
            }
            saveCommonSysConfig(form).then((resp) => {
                if (resp.success) {
                    this.$notify({
                        title: "修改成功",
                        type: "success",
                        duration: 2500,
                    });
                    this.addConfigDialog = false;
                    this.search();
                }
                this.opLoading = false;
            })
        },
        //修改配置
        updateConfig(row) {
            this.updateConfigDialog = true
            this.updateForm = _.cloneDeep(row)
        },
        //确认修改
        doUpdateConfig() {
            this.opLoading = true
            let form = {
                id: this.updateForm.id,
                key: this.updateForm.key,
                value: this.updateForm.value,
                valueType: this.updateForm.valueType,
                note: this.updateForm.note,
            }
            updateCommonSysConfig(form).then((resp) => {
                if (resp.success) {
                    this.$notify({
                        title: "修改成功",
                        type: "success",
                        duration: 2500,
                    });
                    this.updateConfigDialog = false;
                    this.search();
                }
                this.opLoading = false;
            })
        },
        search() {
            this.getList(1)
        },

        getList(pageNo) {
            var self = this
            this.loading = true
            if (pageNo != undefined) {
                this.searchModel.pageNo = pageNo
            }
            const searchModel = _.cloneDeep(this.searchModel)
            searchCommonSysConfig(this.compileSearchModel(searchModel))
                .then((resp) => {
                    self.searchModel.pageNo = ++resp.pageNo
                    self.searchModel.count = resp.count
                    self.searchModel.pageSize = resp.pageSize
                    self.list = resp.data
                    self.loading = false
                })
                .catch((err) => {
                    console.log(err)
                })
        },
        reset() {
            this.searchModel = _.cloneDeep(defaultModel)
            this.getList(1)
        },
        compileSearchModel(searchModel) {
            searchModel.pageNo = searchModel.pageNo - 1
            return searchModel
        },
        // 修改分页
        handleSizeChange(val) {
            this.searchModel.pageSize = val
            this.getList(1)
        },
        // 修改页面
        handleCurrentChange(val) {
            this.getList(val)
        },


        init() {
            // 初始化搜索框中数据
            this.getList(1)
        }
    }
}
</script>
  
<style lang="scss" scoped></style>
  